<template>
  <div class="container">
    <div style="display:flex;justify-content:flex-start;align-items:center;">
      <span>这里用来随机一张图片</span>
      <el-select v-model="selectVal" placeholder="请选择浏览类型" style="margin-left:20px;" @change="changeSelect">
        <el-option
          v-for="item in terminalList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="typeVal" placeholder="请选择图片类型" style="margin-left:20px;">
        <el-option
          v-for="item in typeList"
          :key="item.label"
          :label="item.label"
          :value="item.label">
        </el-option>
      </el-select>
      <el-button type="primary" style="margin-left:20px;" @click="action">随机</el-button>
    </div>
    <div class="demo-image__preview" style="margin-top:20px">
      <el-image
        style="width: 500px; height: 500px"
        :src="imageUrl"
        :preview-src-list="imageUrlList"
        :fit="'scale-down'">
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>
    </div>
  </div>
</template>

<script>
import { randomImage,randomImage2,randomImage3,clearImage} from '@/common/common'

export default {
  data() {
    return {
      terminalList:[
        {label:"电脑端",value:1},
        {label:"手机端",value:2},
        {label:"头像",value:3}
      ],
      typeList:[],
      typeVal:"",
      selectVal:"",
      content:'',
      imageUrl:'',
      imageUrlList:[]
    }
  },
  methods:{
    changeSelect(value){
      this.typeVal = "";
      if(value == 1){
        this.typeList = [
          {label:"美女"},
          {label:"汽车"},
          {label:"二次元"},
          {label:"超清二次元"},
          {label:"背景"},
          {label:"动漫"},
        ]
      }else if(value == 2){
        this.typeList = [
          {label:"美女"},
          {label:"二次元"},
          {label:"腿控"},
        ]
      }else if(value == 3){
        this.typeList = [
          {label:"男"},
          {label:"女"},
          {label:"动漫男"},
          {label:"动漫女"}
        ]
      }
    },
    action(){
      if(this.selectVal == ''){
        this.$message.error("请先选择浏览类型");
        return;
      }
      if(this.typeVal == ''){
        this.$message.error("请先选择图片类型");
        return;
      }
      if(this.selectVal == 1) {
        if(this.typeVal == '超清二次元'){
          let params = {}
          clearImage(params).then(res=>{
            if(res.status == 200){
              let content = JSON.parse(res.data.body);
              this.imageUrl = content.imgurl;
              this.imageUrlList = [content.imgurl]
            }
          })
        }else {
          let params = {
            type:this.typeVal
          };
          randomImage(params).then((res) => {
            if(res.status == 200){
              let content = JSON.parse(res.data.body);
              this.imageUrl = content.imgurl;
              this.imageUrlList = [content.imgurl]
            }
          })
          .catch((err) => {
            console.log(err);
          })
        }
      }else if(this.selectVal == 2){
        let params = {
          type:this.typeVal
        };
        randomImage2(params).then((res) => {
          if(res.status == 200){
            let content = JSON.parse(res.data.body);
            this.imageUrl = content.imgurl;
            this.imageUrlList = [content.imgurl]
          }
        })
        .catch((err) => {
          console.log(err);
        })
      }else if(this.selectVal == 3){
        let params = {
          type:this.typeVal
        };
        randomImage3(params).then((res) => {
          if(res.status == 200){
            let content = JSON.parse(res.data.body);
            this.imageUrl = content.imgurl;
            this.imageUrlList = [content.imgurl]
          }
        })
        .catch((err) => {
          console.log(err);
        })
      }
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  padding: 1%;
  margin: 0 auto;
}
</style>
